<template>
  <div class="selectBind">
    <div class="left">
      <div class="selectBind-title">
        <div class="rectangle"></div>组织架构
      </div>
      <deptTree class="botm-body" ref="myTree" :treeList="treeList"></deptTree>
    </div>
    <div class="center">
      <div class="center-search">
        <span style="color:#000;margin-right:10px">光伏板编号</span>
        <el-input clearable v-model="searchName" placeholder="请输入关键词" style="width: 150px;"></el-input>
        <span style="color:#000;margin-left: 40px;">已选监管对象：{{ count }}</span>
        <div class="search-btn" @click="getData">
          <div class="btn-img"></div>查询
        </div>
      </div>
      <div class="center-table" v-loading="loading">
        <virtualTable style="width:100%;height:400px;" :columns="bindTableHeader" :data="selectTableData">
          <template #headerItem="{ data }">
            <span v-if="data.key == 'checkbox'">
              <el-checkbox v-model="checkAll" @change="handleSelectionAll"></el-checkbox>
            </span>
            <span v-else>{{ data.title }}</span>
          </template>
          <template #rowItem="{ column, rowData }">
            <span v-if="column.key == 'checkbox'">
              <el-checkbox v-model="rowData.checkStatus" @change="handleSelectionChange"></el-checkbox>
            </span>
            <span v-else>{{ rowData[column.key] }}</span>
          </template>
        </virtualTable>
      </div>
    </div>
  </div>
</template>
<script setup>
import deptTree from "./deptTree"
import virtualTable from '@/components/virtualTable/index.vue'
import { getCarList } from "@/api/comlbs/alarmRule";

const prop = defineProps({
  bindTableHeader: { type: Array },
  treeList: { type: Array },
  alarmRuleId: { type: String },
});

const count = ref(0);
const selectTableData = ref([]) //表格列表
const searchName = ref('') //表格列表

const initialList = ref([]) //最开始绑定的车列表
const loading = ref(false)
const myTree = ref(null)
const checkAll = ref(false)

function getSelectTableData(id) {
  let companyId
  nextTick(() => {
    companyId = id || myTree.value?.$refs.deptTree.getCheckedKeys();
    if (!companyId || companyId.length == 0) {
      companyId = [-1]
    }
    loading.value = true
    let _data = {
      alarmRuleId: prop.alarmRuleId,
      companyIds: companyId,
      numberPlate: searchName.value
    }
    //获取当前规则绑定的所有设备分页表格
    getCarList(_data).then(res => {
      if (res.code == 200) {
        loading.value = false
        selectTableData.value = res.data
        initialList.value = [];

        nextTick(() => {
          selectTableData.value.forEach(v => {
            v.checkStatus = false
            if (v.bindRuleStatus == 1) {
              v.checkStatus = true  //存在绑定则table勾选
              initialList.value.push(v.objectId);
            }
          })
          count.value = initialList.value.length;
        })
      }
    })
  })
}

//设备选择 单选点击事件   _list勾选  obj当前勾选
function handleSelectionChange(val) {
  count.value = 0;
  selectTableData.value.forEach(v => {
    if (v.checkStatus) count.value++;
  })
}
//设备选择 全选点击事件
function handleSelectionAll(val) {
  if (val) {
    selectTableData.value.forEach(v => {
      v.checkStatus = true
    })
  } else {
    selectTableData.value.forEach(v => {
      v.checkStatus = false
    })
  }
}

getSelectTableData()


function getData() {
  nextTick(() => {
    getSelectTableData()
  })
}

function deptTreeNodeClick(ids) {
  getSelectTableData(ids);
}
defineExpose({
  initialList,
  selectTableData,
  deptTreeNodeClick
});
</script>
<style lang='scss' scoped>
.selectBind {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    width: 35%;
    text-align: center;

    .botm-body {
      padding: 20px;
      box-sizing: border-box;
      height: 100%;
      width: 100%;

      :v-deep(.el-button) {
        padding: 7px !important;
      }
    }

    .selectBind-title {
      height: 24px;
      font-size: 16px;
      font-weight: 600;
      color: #424242;
      background-color: #e6efff;
      display: flex;
      align-items: center;
      margin: 0 20px;
    }

    .carchk {
      display: flex;
      justify-content: space-around;
    }
  }

  .center {
    width: 65%;
    box-sizing: border-box;
    text-align: center;
    position: relative;

    .center-search {
      color: #fff;
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      :v-deep(.el-input__inner) {
        height: 30px;
        line-height: 30px;
        width: 150px;
      }

      i {
        margin-right: 3px;
      }

      //其他样式
      .other-btn {
        line-height: 32px;
        border-radius: 2px;
        display: inline-block;
        text-align: center;
        background: rgb(242, 121, 27);
        margin-left: 20px;
        cursor: pointer;
        font-size: 12px;
        padding: 0 6px;
        border: 1px solid #dadada;
        box-sizing: border-box;
        background: #fbfbfb;
        color: #1f1f1f;
      }

      .search-btn {
        border-radius: 2px;
        background: #3C7BF8;
        color: #fff;
        width: 74px;
        line-height: 32px;
        text-align: center;
        float: right;
        font-size: 14px;
        cursor: pointer;
        border-radius: 2px;
        margin-left: auto;
        margin-right: 20px;

        .btn-img {
          background-image: url("");
          width: 16px;
          height: 16px;
          display: inline-block;
          position: relative;
          top: 3px;
          margin-right: 8px;
          background-size: 100% 100%;
        }
      }
    }

    .center-table {
      height: calc(100% - 50px);
    }
  }

  .green-bar {
    background-color: #ebebeb;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    color: #1f1f1f;
    width: calc(50% - 10px);
    display: inline-block;
    margin: 5px;
    margin-top: 0;

    .delete-bar {
      width: 10px;
      height: 10px;
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
    }

    &.active {
      background-color: #ddf5e0;
    }
  }
}

.pagination {
  position: unset;
  margin-top: 10px;
  text-align: right;
}

:deep(.el-pagination__sizes .el-select) {
  top: -3px;
}
</style>